<template>
    <div id='categorydetail'>
        <P></P>
        <p>
            <span>当前商品分类ID：{{shopid}}</span>
        </p>
        <el-button class="btn" style="background: #337ab7; color:white;" @click="$router.push('/product-category/add')">
            ±添加品类</el-button>
        <br>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="品类ID">
            </el-table-column>
            <el-table-column prop="name" label="品类名称">
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button type="primary" size="mini" @click="upname(scope.row)">修改名称</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog title="修改名称" :visible.sync="dialogVisible" width="30%">
            <el-input v-model="input" placeholder="请输入品类名称"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updata(),dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <Paginations :obj="obj" @pagenum="handleCurrentChange" @pagesize="handleSizeChange"></Paginations>

    </div>
</template>

<script>
    import {
        Table,
        TableColumn,
        Button,
        Dialog,
        Input,
    } from 'element-ui'
    import P from '../../Home/P.vue';
    import {
        categoryList,
        categoryUpname,
        options2
    } from '../../../api';
    import Paginations from '../../Home/Paginations.vue';
    export default {
        components: {
            Paginations,
            P,
            'el-table': Table,
            'el-table-column': TableColumn,
            'el-button': Button,
            'el-dialog': Dialog,
            'el-input': Input,
        },
        data() {
            return {
                obj: {
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                shopid: 0, //商品id
                input: '',
                tableData: [],
                dialogVisible: false,
                id: ''
            };
        },
        methods: {
            updata() {
                var obj = {
                    categoryId: this.id,
                    categoryName: this.input
                }
                console.log(obj);
                categoryUpname(obj).then(res => {
                    this.$message({
                        message: res.data.data,
                        type: 'success'
                    });
                    this.getUser()
                })
            },
            upname(row) {
                this.dialogVisible = true
                this.id = row.id
                this.input = row.name
            },
            async getUser() {
                let {
                    data: res
                } = await options2({
                    categoryId: this.shopid
                })
                this.tableData = res.data
                this.obj.total = res.data.total
            },

            handleSizeChange(val) {
                this.obj.pageSize = val
                this.getUser(this.obj)
            },
            handleCurrentChange(val) {
                this.obj.pageNum = val
                this.getUser(this.obj)
            },
            formatTime(row, column, cellValue, index) {
                return Time(row.createTime)
            },
        },
        mounted() {
            var id = this.$route.query.id
            this.shopid = id
            this.getUser()
        },
        computed: {

        }
    }
</script>
<style lang='scss' scoped>
    #categorydetail {
        position: relative;

        .btn {
            position: absolute;
            top: 30px;
            right: 30px;
        }
    }
</style>